<html>
<head>
<!--  
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
	djConfig="parseOnLoad: true, isDebug: true"></script>
-->
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
	djConfig="parseOnLoad:true"></script>


<script type="text/javascript">
  //dojo.require("dijit.layout.ContentPane");
  //dojo.require("dojo.parser");  // scan page for widgets and instantiate them
  dojo.require("dijit.form.Form");
  dojo.require("dijit.Dialog");
  dojo.require("dijit.form.TextBox");  
  dojo.require("dijit.form.Button");
  dojo.require("dijit.TitlePane");
  dojo.require("dijit.layout.ContentPane");	
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("dijit.form.FilteringSelect");
  dojo.require("dijit.Dialog");
  dojo.require("dijit.form.TextBox");
  dojo.require("dijit.form.TimeTextBox");
  dojo.require("dijit.form.Button");
  dojo.require("dijit.form.DateTextBox");	            
  dojo.require("dojox.grid.DataGrid");
  dojo.require("dojo.data.ItemFileReadStore");
  dojo.require("dijit.form.DateTextBox");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dijit.layout.ContentPane");
  
  
              dojo.addOnLoad(function() {
                formDlg = dijit.byId("captcha");
                var registrarPasajeros = dijit.byId("registro");
                var modificarPasajeros = dijit.byId("modifica");
                // connect t the button so we display the dialog onclick:
                dojo.connect(dijit.byId("registrar"), "onClick", registrarPasajeros, "show");
                dojo.connect(dijit.byId("modifica"), "onClick", modificarPasajeros, "show");
                //dojo.connect(dijit.byId("registrar"), "onClick", formDlg, "show");
            });
/*
            function checkData() {
                var data = formDlg.get('value');
                //console.log(data);
                if (data != 'CAPTCHA') {
                    alert("No coinciden los caracteres");                
                }
            }
 */
</script>
<!--
<style type="text/css">
@import "dojoroot/dijit/themes/claro/claro.css";
@import "dojoroot/dojox/grid/resources/claroGrid.css";
@import "dojoroot/dojox/grid/resources/Grid.css";
</style>
-->
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />

<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/Grid.css" />

<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/claroGrid.css" />

<script type="text/javascript">
dojo.ready(function() {
	var theGreatestTeamOfAllTime = {
		items: [ {
				  "tipoDoc":"12",
				  "nombres":"Jim Kelly",
				  "apellido":"QB",
				  "estadocivil":"0"
				  },
		         {
				  "tipoDoc":"34",
				  "nombres":"Thurman Thomas",
				  "apellido":"RB",
				  "estadocivil":"0"
				  },
		         {
				  "tipoDoc":"89",
				  "nombres":"Steve Tasker",
				  "apellido":"WR",
				  "estadocivil":"0"
				  },
			{
				"tipoDoc":"78",
				"nombres":"Bruce Smith",
				"apellido":"DE",
				"estadocivil":"0"
			}
		       ],
		identifier: "tipoDoc"
	};

	var dataStore =
	new dojo.data.ItemFileReadStore(
		{ data:theGreatestTeamOfAllTime }
	);
	var grid = dijit.byId("billsGrid");
	grid.setStore(dataStore);
});
</script>

</head>
<body class="claro">
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm" encType="multipart/form-data">

<table align="center">
	<tr align="center">
		<td><label for="nroorden">CAPTCHA </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="captcha" id="captcha"></td>
	</tr>
	<tr align="center">
		<td>
		<button id="registrar" dojoType="dijit.form.Button" type="button" onclick="dijit.byId('registro').show()">Registrar Nueva <br>
		Lista de Pasajeros</button>
		</td>
		<td align="center">
		<button id="modificar" dojoType="dijit.form.Button" type="button" onclick="dijit.byId('modifica').show()">Modificar
		<br>
		Lista de Pasajeros</button>
		</td>
	</tr>
</table>
</div>
<div dojoType="dijit.Dialog" id="registro" title="Registrar nuevo manifiesto de pasajeros">

<table align="center">
	<tr align="center">
		<td><label for="salida">SALIDE DEL PERU </label></td>
		<td><label for="salida">Fecha de Viaje</label></td>
		<td><input dojoType="dijit.form.DateTextBox" type="text" name="fecha" id="fecha"></td>
		<td><label for="salida">NRO </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="nro" id="nro" style="width: 140px; "></td>
	</tr>	
</table>
<!-- Accordion -->
<div id="accordion" dojoType="dijit.layout.AccordionContainer">

<div class="element" title="Datos del Vehiculo" selected="true"
	dojoType="dijit.layout.ContentPane">

<table>
	<tr>
		<td><label for="vehiculo">Tipo de Vehiculo </label></td>
		<td><select dojoType="dijit.form.FilteringSelect"
			id="TipoVehiculo" name="TipoVehiculo" autoComplete="false">
			<option value="PAR">Particular</option>
			<option value="COL">Colectivo</option>
		</select></td>
	</tr>
	<tr>
		<td><label for="pais">Pais </label></td>
		<td><select dojoType="dijit.form.FilteringSelect" id="Pais"
			name="Pais" autoComplete="false">
			<option value="PE">PERU</option>
			<option value="CH">CHILE</option>
		</select></td>
		<td width="10%"></td>
		<td><label for="marca">Placa </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text" name="placa"
			id="placa"></td>
	</tr>
	<tr>
		<td><label for="marca">Marca </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text" name="marca"
			id="marca"></td>
		<td></td>
		<td><label for="marca">Modelo </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="modelo" id="modelo"></td>
	</tr>
	<tr>
		<td><label for="motor">N/S Motor </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text" name="motor"
			id="motor"></td>
		<td></td>
		<td><label for="marca">Fabricacion </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="fabricacion" id="fabricacion"></td>
	</tr>
	<tr>
		<td><label for="chasis">N/S Chasis </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="chasis" id="chasis"></td>
	</tr>

</table>

</div>

<div class="element" title="Datos del Conductor"
	dojoType="dijit.layout.ContentPane">
<table>
	<tr>
		<td><label for="pais2">Pais </label></td>
		<td><select dojoType="dijit.form.FilteringSelect" id="Pais2"
			name="Pais2" autoComplete="false">
			<option value="PE">PERU</option>
			<option value="CH">CHILE</option>
		</select></td>
	</tr>
	<tr>
		<td><label for="pais">Identidad </label></td>
		<td><select dojoType="dijit.form.FilteringSelect" id="iden"
			name="iden" autoComplete="false">
			<option value="DNI">DNI</option>
			<option value="PAS">PASAPORTE</option>
		</select></td>
		<td width="10%"></td>
		<td><label for="marca">Nro. </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="numero" id="numero"></td>
	</tr>
	<tr>
		<td><label for="marca">Nombres </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="nombres" id="nombres"></td>
		<td></td>
		<td><label for="marca">Estado </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="estado" id="estado"></td>
	</tr>
	<tr>
		<td><label for="motor">A. Paterno </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="paterno" id="paterno"></td>
		<td></td>
		<td><label for="marca">Ocupacion </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="ocupacion" id="ocupacion"></td>
	</tr>
	<tr>
		<td><label for="chasis">A. Materno </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="materno" id="materno"></td>
	</tr>

</table>


</div>
<div class="element" title="Datos del Pasajero"
	dojoType="dijit.layout.ContentPane">
	
<div style="width: 600px; height: 200px" class="claro">
<table id="billsGrid" dojoType="dojox.grid.DataGrid">
	<thead>
		<tr>
			<th field="tipoDoc">Tipo Doc Nro Doc</th>
			<th field="nombres">Nombres</th>
			<th field="apellido">Apellido Paterno Apellido Materno</th>
			<th field="estadocivil" width="180px">Estado Civil Ocupacion</th>
		</tr>
	</thead>
</table>
</div>
</div>
</div>

<table align="right">	
	<tr align="right">		
		<td align="center">
		<button id="imprmir" dojoType="dijit.form.Button" type="button">Imprimir
		</button>
		</td>
	</tr>
</table>
</div>



<!-- Tabbed Pane -->
<div dojoType="dijit.Dialog" id="modifica" title="Modificar manifiesto de pasajeros">
<div dojoType="dijit.layout.TabContainer"
	style="width: 600px; height: 400px;" tabPosition="left-h"
	tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="Nro Orden"
	selected="true">

<table>

	<tr>
		<td><label for="nroorden">Nro de Orden </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text"
			name="nroordenmod" id="nroorden"></td>
	</tr>
	<tr>
		<td colspan="2" align="right">
		<button dojoType="dijit.form.Button" type="button">BUSCAR</button>
		</td>
	</tr>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" title="Vehiculo">
<table>
	<tr>
		<td><label for="pais2mod">Pais Vehiculo</label></td>
		<td><select dojoType="dijit.form.FilteringSelect" id="PaisCarromod"
			name="PaisCarromod" autoComplete="false">
			<option value="PE">PERU</option>
			<option value="CH">CHILE</option>
		</select></td>
		<td width="10%"></td>
		<td><label for="placamod">Placa </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text" name="placa"
			id="placamod"></td>

	</tr>

	<tr>
		<td><label for="pais2mod">Pais Conductor</label></td>
		<td><select dojoType="dijit.form.FilteringSelect" id="PaisConmod"
			name="PaisCon" autoComplete="false">
			<option value="PE">PERU</option>
			<option value="CH">CHILE</option>
		</select></td>
	</tr>
	<tr>
		<td><label for="pais">Tipo ID</label></td>
		<td><select dojoType="dijit.form.FilteringSelect" id="tipoIdmod"
			name="tipoIdmod" autoComplete="false">
			<option value="DNI">DNI</option>
			<option value="PAS">PASAPORTE</option>
		</select></td>

	</tr>
	<tr>
		<td><label for="marca">Nro </label></td>
		<td><input dojoType="dijit.form.TextBox" type="text" name="nromod"
			id="nromod"></td>

	</tr>
	<tr>
		<td colspan="6" align="right">
		<button dojoType="dijit.form.Button" type="button">BUSCAR</button>
		</td>
	</tr>

</table>
</div>
</div>

</div>




</body>
</html>